<template>
  <div>
    <div class="header">
      <el-col :span="4" :push="1">
        <el-select v-model="states" value-key="states" @change="changeState()" style="margin-top: 10px;width:78%" filterable placeholder="请选择状态">
          <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" :push="2">
        <el-input style="margin-top:10px" v-model="search" @change="searchPage()"
                  oninput="value=value.replace(/\s*/g, '')" placeholder="服务主题" suffix-icon="el-icon-search"></el-input>
      </el-col>
      <el-col :span="2" :push="3">
        <el-button icon="el-icon-refresh" style="margin-top:10px" @click="reset">重置</el-button>
      </el-col>
      <el-col :span="2" :push="4">
        <el-button icon="el-icon-circle-plus" style="margin-top:10px" @click="clear">新建</el-button>
      </el-col>
    </div>
    <el-table :data="tableData" :default-sort = "{prop: 'servDate', order: 'descending'}" style="width:100%">
      <el-table-column prop="servId" type="selection"></el-table-column>
      <el-table-column align="left" prop="servSubject" width="300px" label="主题">
        <template slot-scope="e">
          <span class="information-title">{{e.row.servSubject}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="customerByCustomId.cusName" label="对应客户"></el-table-column>
      <el-table-column prop="servType" label="服务类型"></el-table-column>
      <el-table-column prop="servMode" label="服务方式"></el-table-column>
      <el-table-column prop="servDate" sortable label="开始日期">
        <template slot-scope="c">
          {{c.row.servDate | formatDate}}
        </template>
      </el-table-column>
      <el-table-column prop="servOper" label="执行人"></el-table-column>
      <el-table-column prop="servData" label="花费时间"></el-table-column>
      <el-table-column prop="servState" label="状态">
        <template slot-scope="s">
          {{s.row.servState | formatState}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="s">
          <i class="el-icon-edit" title="修改" style="font-size:17px;cursor:pointer" @click="update(s.row.servId)"></i>
          <i class="el-icon-delete" title="删除" style="font-size:17px;cursor:pointer" @click="deleteByServId(s.row.servId)"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog title="客户服务" :visible.sync="dialogFormVisible" width="60%">
      <hr class="border-t-a"/>
      <el-form label-position="right" label-width="80px" :model="server" :rules="rules" ref="server" style="margin-left: 40px">
        <el-form-item label="主题" prop="servSubject">
          <el-input style="width:598px" v-model="server.servSubject" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="对应客户" prop="customerByCustomId.customId">
          <el-select v-model="server.customerByCustomId.customId"
                     value-key="server.customerByCustomId.customId"
                     style="width: 598px" filterable remote placeholder="请选择客户">
            <el-option v-for="cus in customerList" :key="cus.customId" :label="cus.cusName" :value="cus.customId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务类型">
          <el-radio-group v-model="server.servType">
            <el-radio label="答疑"></el-radio>
            <el-radio label="故障排除"></el-radio>
            <el-radio label="培训"></el-radio>
            <el-radio label="升级"></el-radio>
            <el-radio label="其它"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务方式">
          <el-radio-group v-model="server.servMode">
            <el-radio label="电话"></el-radio>
            <el-radio label="传真"></el-radio>
            <el-radio label="邮寄"></el-radio>
            <el-radio label="上门"></el-radio>
            <el-radio label="其它"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <el-form-item label="开始日期" prop="servDate">
              <el-date-picker
                v-model="server.servDate"
                type="datetime"
                style="width: 220px"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="2">
            <el-form-item label="花费时间" style="margin-left: 10px">
              <el-select v-model="server.servData" style="width: 220px" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="状态">
          <el-radio-group v-model="server.servState">
            <el-radio :label="1">无需处理</el-radio>
            <el-radio :label="2">未处理</el-radio>
            <el-radio :label="3">处理中</el-radio>
            <el-radio :label="4">处理完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="执行人" prop="servOper">
          <el-select v-model="server.servOper" value-key="server.servOper"
                     style="width: 598px" filterable remote
                     placeholder="请选择执行人">
            <el-option v-for="e in empList" :key="e.empName" :value="e.empName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务内容">
          <el-input
            type="textarea"
            autosize
            v-model="server.servDetails"
            style="width: 598px">
          </el-input>
        </el-form-item>
        <el-form-item label="客户反馈">
          <el-input
            type="textarea"
            autosize
            v-model="server.servTicks"
            style="width: 598px">
          </el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            autosize
            v-model="server.servRemark"
            style="width: 598px">
          </el-input>
        </el-form-item>
        <el-button icon="el-icon-check" @click="addServ('server')" style="margin-left: 620px">保存</el-button>
      </el-form>
    </el-dialog>
    <el-row style="background-color: white">
      <!-- 分页 -->
      <div class="limit">
        <el-pagination
          :current-page.sync="currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @current-change="changePage"
          @size-change="sizeChange">
        </el-pagination>
        <p></p>
      </div>
    </el-row>
    <el-row style="height: 500px;background-color:white">
      <el-row style="font-size: 12px;font-weight: 600;margin-top: 20px">
        <el-col :span="12" :push="1">
          <span><b>分布</b></span>
        </el-col>
        <el-col :span="10">
          <span style="margin-left: 20px"><b>Top</b></span>
        </el-col>
      </el-row>
      <el-col :span="12">
        <!-- 饼状图 -->
        <div style="height:400px" ref="pieCharts"></div>
        <div>
          <el-select style="margin-left: 150px;width: 300px" v-model="pieSelect" value-key="pieSelect" @change="changePieChart">
            <el-option v-for=" p in pieChartOptions" :key="p.value" :label="p.label" :value="p.value"></el-option>
          </el-select>
        </div>
      </el-col>
      <!-- 柱状图 -->
      <el-col :span="11">
        <div style="height:400px" ref="barCharts"></div>
        <div>
          <el-select style="margin-left:150px;width: 300px" v-model="barSelect" value-key="barSelect" @change="changeBarChart">
            <el-option v-for=" p in barChartOptions" :key="p.value" :label="p.label" :value="p.value"></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    export default {
      name: "AsService",
      data: function () {
        return {
          tableData: [],
          customerList: [], //客户列表
          empList:[],       //员工列表
          repairMonthList: [],//饼状图数据
          deliveredList: [],//柱状图数量
          deliveredMonthList: [],//柱状图月份
          server: {
            servId:'',
            servSubject:'',
            servType:'',
            servMode:'',
            servDate:'',
            servOper:'',
            servData:'',
            servState:'',
            servDetails:'',
            servTicks:'',
            servRemark:'',
            servDelete:'',
            customerByCustomId:{
              customId:'',
              cusName:''
            }
          },      //客户服务表
          states:'',       //下拉框
          search:'',       //按条件查询
          dialogFormVisible:false,
          pieSelect: 1,    //饼状图选择器
          barSelect: 1,    //柱状图选择器
          //分页
          currPage: 1,     //当前页
          totalSize: 0,    //总条数
          pageSize: 5,     //页大小
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }, {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }]
          },
          option: [{
            value: '1',
            label: '无需处理'
          }, {
            value: '2',
            label: '未处理'
          }, {
            value: '3',
            label: '处理中'
          }, {
            value: '4',
            label: '处理完成'
          }],
          options: [{
            value: '选项1',
            label: '1小时'
          }, {
            value: '选项2',
            label: '2小时'
          }, {
            value: '选项3',
            label: '3小时'
          }, {
            value: '选项4',
            label: '半个工作日'
          }, {
            value: '选项5',
            label: '1个工作日'
          }, {
            value: '选项6',
            label: '2个工作日'
          }, {
            value: '选项7',
            label: '2个工作日以上'
          }],
          pieChartOptions:[{
            value: 1,
            label: '服务类型分布'
          }, {
            value: 2,
            label: '服务方式分布'
          }, {
            value: 3,
            label: '客服花费时间分布'
          }, {
            value: 4,
            label: '客户服务次数分布'
          }],
          barChartOptions:[{
            value: 1,
            label: '客户服务月度统计'
          }, {
            value: 2,
            label: '处理完成月度统计'
          }],
          //表单校验
          rules: {
            servSubject: [
              {required: true, message: '请输入主题内容', trigger: 'blur'},
              {min: 1, max: 250, message: '长度在 1 到 250 个字符', trigger: 'blur'}
            ],
            'customerByCustomId.customId': [
              {required: true, message: '请选择客户', trigger: 'change' },
            ],
            servOper: [
              {required: true, message: '请选择执行人', trigger: 'change' }
            ],
            servDate: [
              {required: true, message: '请选择日期', trigger: 'change' }
            ]
          }
        }
      },
      created:function(){
        this.initData(this.states,this.search,this.currPage,this.pageSize);

        this.$axios.get("http://localhost:8088/crm/check-all"
        ).then(v=>{//客户
          this.customerList = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })

        this.$axios.get("http://localhost:8088/ser/check-emp"
        ).then(v=>{//员工
          this.empList = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })

        this.pieChartOne();
        this.barChartOne();
      },
      methods:{
        initData(states, search, currPage, pageSize){
          this.$axios.get("http://localhost:8088/ser/sver-page",
            {params:{states:states, search:search, currPage:currPage, pageSize:pageSize}}
          ).then(v=>{
            this.tableData = v.data.rows;
            this.totalSize = v.data.total;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        },
        changePage(currPage){
          this.initData(this.states, this.search, currPage, this.pageSize);
        },
        changeState(){
          this.initData(this.states, this.search, this.currPage, this.pageSize);
        },
        searchPage(){
          this.initData(this.states, this.search, this.currPage, this.pageSize);
        },
        sizeChange (pageSize) { //改变页大小
          this.pageSize = pageSize;
          this.initData(this.states, this.search, 1, pageSize);
        },
        reset(){//重置
          this.states = '';
          this.search = '';
          this.initData(this.states, this.search, this.currPage, this.pageSize);
        },
        pieChartOne(){
          this.$axios.get("http://localhost:8088/ser/check-type"
          ).then(v=>{//服务类型分布
            this.repairMonthList = v.data;
          })
        },
        pieChartTwo(){
          this.$axios.get("http://localhost:8088/ser/check-mode"
          ).then(v=>{//服务方式分布
            this.repairMonthList = v.data;
          })
        },
        pieChartThree(){
          this.$axios.get("http://localhost:8088/ser/check-date"
          ).then(v=>{//客服花费时间分布
            this.repairMonthList = v.data;
          })
        },
        pieChartFour(){
          this.$axios.get("http://localhost:8088/ser/check-customer"
          ).then(v=>{//客户服务次数分布
            this.repairMonthList = v.data;
          })
        },
        changePieChart(){
          this.repairMonthList = [];
          if(this.pieSelect == 1){
            this.pieChartOne();
          }else if(this.pieSelect == 2){
            this.pieChartTwo();
          }else if(this.pieSelect == 3){
            this.pieChartThree();
          }else if(this.pieSelect == 4){
            this.pieChartFour();
          }
        },
        pieChart(){
          let myChart = this.$echarts.init(this.$refs.pieCharts);//显示
          myChart.setOption({
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [{
              name: '分布',
              type: 'pie',
              radius: '74%',
              center: ['50%', '50%'],
              clockwise: false,
              data: this.repairMonthList,
              label: {
                normal: {
                  textStyle: {
                    color: '#999',
                    fontSize: 14,
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  borderWidth: 4,
                  borderColor: '#ffffff',
                },
                emphasis: {
                  borderWidth: 0,
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }],
            color: [
              '#00acee',
              '#52cdd5',
              '#79d9f1',
              '#a7e7ff',
              '#c8efff'
            ],
            backgroundColor: '#fff'
          })
        },
        barChartOne(){
          this.$axios.get("http://localhost:8088/ser/serv-count"
          ).then(v=>{//客户服务月度统计数
            this.deliveredList = v.data;
          })

          this.$axios.get("http://localhost:8088/ser/serv-month"
          ).then(v=>{//客户服务月度统计的月份
            this.deliveredMonthList = v.data;
          })
        },
        barChartTwo(){
          this.$axios.get("http://localhost:8088/ser/finish-count"
          ).then(v=>{//处理完成月度统计数
            this.deliveredList = v.data;
          })

          this.$axios.get("http://localhost:8088/ser/finish-month"
          ).then(v=>{//处理完成月度统计的月份
            this.deliveredMonthList = v.data;
          })
        },
        changeBarChart(){
          this.deliveredList = [];
          this.deliveredMonthList = [];
          if(this.barSelect == 1){
            this.barChartOne();
          }else if(this.barSelect == 2){
            this.barChartTwo();
          }
        },
        barChart(){
          let myChart = this.$echarts.init(this.$refs.barCharts);//显示
          myChart.setOption({
            color: ['#3b9ffc'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '30',
              right: '30',
              bottom: '20',
              containLabel: true
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
            },
            calculable: true,
            xAxis: {
              splitLine: {
                show: false
              }, //去除网格线
              splitArea: {
                show: false
              }, //保留网格区域
              axisLine: {
                show: true,
                lineStyle: { //轴上的线样式
                  color: '#808492',
                  width: 0.6, //这里是为了突出显示加上的
                },
              },
              axisTick: {
                show: true
              },
              axisLabel: { //轴上的数据样式
                color: '#808492',
              },
              data: this.deliveredMonthList,
            },
            yAxis: {
              show: true,
              type: 'value',
              axisTick: {
                show: false
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(33,148,246,0.2)'
                }
              },
              axisLabel: {
                textStyle: {
                  fontSize: 12,
                  color: '#808492'
                }
              }
            },
            series: [{
              type: 'bar',
              barWidth: 15, // 柱形的宽度
              barGap: 0,
              data: this.deliveredList,
            },
              {
                type: 'line',
                data: this.deliveredList,
                symbol: 'none',
                symbolSize: '10',
                name: '总计',
                lineStyle: {
                  //折线样式
                  color: "#ffc83b"
                },
              }
            ]
          })
        },
        addServ(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$axios.post("http://localhost:8088/ser/save-serv",{
                  servId:this.server.servId,
                  servSubject:this.server.servSubject,
                  servType:this.server.servType,
                  servMode:this.server.servMode,
                  servDate:this.server.servDate,
                  servOper:this.server.servOper,
                  servData:this.server.servData,
                  servState:this.server.servState,
                  servDetails:this.server.servDetails,
                  servTicks:this.server.servTicks,
                  servRemark:this.server.servRemark,
                  servDelete:this.server.servDelete,
                  customerByCustomId:this.server.customerByCustomId
              }).then(v=>{
                this.$message.success("新增成功");
                this.dialogFormVisible = false;
                this.server = {
                  servId:'',
                  servSubject:'',
                  servType:'',
                  servMode:'',
                  servDate:'',
                  servOper:'',
                  servData:'',
                  servState:'',
                  servDetails:'',
                  servTicks:'',
                  servRemark:'',
                  servDelete:'',
                  customerByCustomId:{
                    customId:'',
                    cusName:''
                  }
                };
                this.initData(this.states,this.search,this.currPage,this.pageSize);
              }).catch(v=>{
                alert("访问失败!"+v.data);
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        update(servId){//修改
          this.$axios.get("http://localhost:8088/ser/check-serv",
            {params:{servId:servId}}
          ).then(v=>{
            this.dialogFormVisible = true;
            this.server = v.data;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        },
        deleteByServId(servId){//删除
          this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.get("http://localhost:8088/ser/delete-serv",
              {params: {servId:servId}}
            ).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //刷新数据
              this.initData(this.states,this.search,this.currPage,this.pageSize);
            }).catch(v => {
              alert("访问失败!" + v.data);
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          })
        },
        clear(){
          this.dialogFormVisible = true;
          this.server = {
            servId:'',
            servSubject:'',
            servType:'',
            servMode:'',
            servDate:'',
            servOper:'',
            servData:'',
            servState:'',
            servDetails:'',
            servTicks:'',
            servRemark:'',
            servDelete:'',
            customerByCustomId:{
              customId:'',
                cusName:''
            }
          }
        }
      },
      mounted () {
        setTimeout(()=>{this.pieChart()},500);
        setTimeout(()=>{this.barChart()},500);
      },
      watch: {
        repairMonthList(val) {
          this.pieChart();
        },
        deliveredMonthList(val){
          this.barChart();
        },
        deliveredList(val){
          this.barChart();
        }
      },
      filters: {
        formatState: function (state) {
          if (state != null && state != "") {
            if(state == 1){
              return "无需处理"
            }
            if(state == 2){
              return "未处理"
            }
            if(state == 3){
              return "处理中"
            }
            if(state == 4){
              return "处理完成"
            }
          } else {
            return "";
          }
        },
        formatDate(time){
          let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
          let year   = date.getFullYear();
          let month  = date.getMonth()+1;
          let day    = date.getDate();
          let hour   = date.getHours();
          let minute = date.getMinutes();
          let second = date.getSeconds();
          return year+"-"+month+"-"+day;
          /*return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;*/
        }
      }
    }
</script>

<style scoped>
  .header{
    border: 0px solid white;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    background: white;
  }
  .limit{
    margin-top:10px;
    margin-left:340px;
  }
  .information-title {
    width: 300px;   /*一定要设置宽度，或者元素内含的百分比*/
    overflow:hidden; /*溢出的部分隐藏*/
    white-space: nowrap; /*文本不换行*/
    text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
  }
  .border-t-a {
    border-top: 1px solid #aaaaaa;
    margin-top: -20px;
    margin-bottom: 30px;
  }
</style>
